<template>
  <div>
    <div class="header">
      <div class="avatar">
        <!-- 使用div元素代替纯色圆形图片作为头像 -->
        <div class="avatar-circle"></div>
      </div>
      <ul class="header-list">
        <li class="header-list-item" @click="goToLogin">登录</li>
        <li class="header-list-item login-info">登录显示信息</li>
      </ul>
    </div>

    <van-grid :column-num="3">
      <van-grid-item>
        <van-icon name="balance-list-o" class="grid-icon" />
        <div class="grid-item" @click="goToOrders">订单</div>
      </van-grid-item>
      <van-grid-item>
        <van-icon name="service-o" class="grid-icon" />
        <div class="grid-item" @click="goToServices">服务</div>
      </van-grid-item>
      <van-grid-item>
        <van-icon name="coupon-o" class="grid-icon" />
        <div class="grid-item" @click="goToCoupons">优惠券</div>
      </van-grid-item>
    </van-grid>

    <div class="function-list" v-if="contentLoaded">
      <div @click="goToInfo">修改信息</div>
      <div @click="inviteFriends">邀请好友</div>
      <div @click="bindChild">绑定孩子</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MeView",
  data() {
    return {
      contentLoaded: true, // 假设这个变量会在内容加载完成后变为true
    };
  },

  methods: {
    goToLogin() {
      // 导航到登录页面
      this.$router.push("/login");
    },
    goToOrders() {
      // 导航到订单页面
      this.$router.push("/orders");
    },
    goToServices() {
      // 导航到服务页面
      this.$router.push("/services");
    },
    goToCoupons() {
      // 导航到优惠卷页面
      this.$router.push("/coupons");
    },
    goToInfo() {
      // 导航到修改信息页面
      // 例如: this.$router.push('/info');
    },
    inviteFriends() {
      // 调用邀请好友的功能
      // 例如: 显示一个邀请好友的界面
    },
    bindChild() {
      // 调用绑定孩子的功能
      // 例如: 显示一个绑定孩子的界面
    },
  },
};
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  margin-top: 0px;
  margin-left: 0px;
  background-color: #c0e0f8; /* 设置浅蓝色背景 */
  height: 135px; /* 设置头部高度 */
}
.header-list {
  list-style: none; /* 移除默认的列表样式 */
  margin: 0; /* 移除默认的外边距 */
  padding: 0; /* 移除默认的内边距 */
  display: block;
  align-items: center; /* 垂直居中列表项 */
  color: rgba(70, 70, 70, 1); /* RGB表示设置文字颜色为浅灰色 */
}

.header-list-item {
  padding: 2px 5px; /* 设置列表项的内边距 */
  font-size: 30px; /* 设置你想要的字体大小 */
  font-weight: bold; /* 加粗字体 */
  cursor: pointer; /* 设置鼠标悬停时的光标样式 */
  /* 可以根据需要添加更多样式，如字体大小、颜色等 */
}
.login-info {
  font-size: 14px; /* 设置字体大小为18px */
  font-weight: normal; /* 确保字体不加粗 */
  cursor: default; /* 设置默认光标样式，因为这不是一个可点击的项 */
  /* 可以根据需要添加更多样式，如字体颜色等 */
}

.function-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* 将内容垂直居中 */
  margin-top: 50px; /* 添加足够的上边距，以便`.function-list`位于屏幕中央 */
}

.function-list div {
  padding: 10px 20px;
  font-size: 20px;
  cursor: pointer;
}

.function-list div:hover {
  background-color: #f0f0f0;
}

.function-list div:active {
  transform: scale(0.98);
}

.feedback-form {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #ccc;
}

input,
textarea {
  padding: 5px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid #ccc;
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
}

label {
  display: block;
  margin-bottom: 5px;
}

.avatar {
  margin-right: 30px; /* 设置头像与登录按钮之间的间距 */
}

.avatar-circle {
  margin-top: 5px;
  margin-left: 10px;
  width: 100px; /* 设置头像的宽度 */
  height: 100px; /* 设置头像的高度 */
  border-radius: 50%; /* 使头像呈现圆形 */
  background-color: #f0f0f0; /* 设置头像的背景颜色 */
}

.grid-row {
  margin-top: 20px;
} /*宫格行*/

.grid-item {
  text-align: center;
  font-size: 16px;
  color: #333;
  cursor: pointer;
  font-size: 20px; /* 设置你想要的字体大小 */
} /*宫格内容*/

.grid-icon {
  font-size: 24px;
  width: 36px;
  height: 36px;
  color: #707070;
}
</style>
